import React from 'react';
import {Layout, Menu, theme} from 'antd';

const { Header, Content, Footer } = Layout;

interface Prop {

    menus : string[] ,

    defaultSelectedKey : string ,

    onClickMenu : ( key : string ) => void

    children : React.ReactNode

}

export const MainLayout = ({ menus , defaultSelectedKey , onClickMenu , children } : Prop ) => {
    const menuL  = ( menus || [] ).map( it => { return { key : it , label : it } } )

    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    return (
        <Layout>
            <Header style={{ display: 'flex', alignItems: 'center' }}>
                <Menu
                    theme="dark"
                    mode="horizontal"
                    defaultSelectedKeys={[defaultSelectedKey]}
                    items={ menuL }
                    style={{ flex: 1, minWidth: 0 }}
                    onClick = { (e) => onClickMenu(e.key) }
                />
            </Header>
            <Content style={{ padding: '0 48px' }}>
                <div style={{ height: 32 }}></div>
                <div
                    style={{
                        background: colorBgContainer,
                        minHeight: 280,
                        padding: 24,
                        borderRadius: borderRadiusLG,
                    }}>
                    { children }
                </div>
            </Content>
            <Footer style={{ textAlign: 'center' }}>
                Ant Design ©{new Date().getFullYear()} Created by Ant UED
            </Footer>
        </Layout>
    );
};
